<!-- tab组件: <me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs> -->
<template>
	<view class="me-tabs">
		<view class="tab-item" v-for="(tab, i) in tabs" :class="{'active': value===i}" :key="i" @click="tabClick(i)">
			{{getTabName(tab)}}
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tabs: { // 支持格式: ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}]
				type: Array,
				default(){
					return []
				}
			},
			name: { // 取name的字段
				type: String,
				default: 'name'
			},
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default: 0
			}
		},
		methods: {
			getTabName(tab){
				return typeof tab === "object" ? tab[this.name] : tab
			},
			tabClick(i){
				if(this.value!=i){
					this.$emit("input",i);
					this.$emit("change",i);
				}
			}
		}
	}
</script>

<style lang="scss">
	.me-tabs{
		display: flex;
		font-size: 12px;
		background-color: #eee;
		text-align: center;
		.tab-item{
			flex: 1;
			padding: 10px 0;
			cursor: pointer;
			&.active{
				background-color: $uni-color-primary;
				color: #fff;
			}
		}
	}
</style>
